<template>
    <div id="change-password">
        <div style="display: flex;justify-content: space-between;align-items: center;">
            <div style="color: #000000;font-weight: bold;" class="s-20">修改密码</div>
            <div @click="goback"  class="back">
                <img  src="../../../assets/img/person/back.png" alt="">
                <span class="s-15 pointer">返回</span>
            </div>
        </div>
        <div class="flex-start" style="margin-top:47px">
            
            <el-form :model="changeForm" :rules="rules" ref="changeForm" hide-required-asterisk label-width="90px">
                <el-form-item prop="mobile" label="手机号">
                    <div class="code-container">
                        <el-input :disabled="true" v-model="changeForm.mobile" style="margin-left:20px"></el-input>
                        <div class="mobile-code tips" @click="getCode" v-if="!codeShow">获取验证码</div>
                        <div class="code-second" v-if="codeShow">{{codeSecond}}秒</div>
                    </div>
                </el-form-item>
                <el-form-item prop="msgCode" label="验证码">
                    <el-input v-arouse v-model="changeForm.msgCode" placeholder="请输入验证码" style="margin-left:20px">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" label="新密码">
                    <el-input v-arouse type="password" show-password v-model="changeForm.password" placeholder="请输入新密码" style="margin-left:20px">
                    </el-input>
                </el-form-item>
                <el-form-item prop="checkpassword" label="确认密码">
                    <el-input v-arouse type="password" show-password v-model="changeForm.checkpassword" placeholder="请再次输入新密码" style="margin-left:20px">
                    </el-input>
                </el-form-item>
                <el-form-item label=" ">
                    <button class="dis-button submit" type="button" @click.prevent="submitChange" >确认修改</button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import User from '@/content/api/user'
import { SqlLib } from '../../../../../../static/lib/sqlite/SqlLib'
import { SqlLibUser } from '../../../../../../static/lib/sqlite/service/SqlLibUser'
export default {
    data() {
        let checkpassword = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请再次输入密码'))
            }
            if (value !== this.changeForm.password) {
                return callback(new Error('两次密码输入不一致'))
            } else {
                return callback()
            }
        }
        // let mobile = (rule, value, callback) => {
        //     let rex = new RegExp(/^1\d{10}$/g)
        //     if (rex.test(value)) {
        //         this.isErrorp = false
        //         return callback()
        //     } else {
        //         this.isErrorp = true
        //         return callback(new Error('手机号输入错误'))
        //     }
        // }
        let msgCode = (rule, value, callback) => {
            if (value) {
                this.isErrorc = false
                return callback()
            } else {
                this.isErrorc = true
                return callback(new Error('请输入验证码'))
            }
        }
        return {
            codeShow: false,
            codeSecond: 60,
            changeForm: {
                mobile: '',
                msgCode: '',
                password: '',
                checkpassword: '',
            },
            mobile: '',
            rules: {
                // mobile: [{ validator: mobile, trigger: 'change' }],
                msgCode: [{ validator: msgCode, trigger: 'blur' }],
                password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
                checkpassword: [{ validator: checkpassword, trigger: 'change' }],
            }
        }
    },
    mounted() {
        let sqlLib = SqlLib.getInstance(window.$DBDIR)
        let user = SqlLibUser.queryCurrentUser(sqlLib)
        this.mobile = user.mobile
        this.changeForm.mobile = user.mobile.slice(0, 3) + "****" + user.mobile.slice(7)
    },
    methods: {
        goback () {
            let sqlLib = SqlLib.getInstance(window.$DBDIR)
            let user = SqlLibUser.queryCurrentUser(sqlLib)
            let obj = {
                bookId: user.bookId
            }
            if (this.authorzation) {
                if (user.lessonId) {
                    obj.lessonId = user.lessonId
                } else {
                    let book = SqlLibBook.queryChapterLessonByBookId(sqlLib, user.bookId)
                    if (book) {
                        obj.lessonId = book[0].lessonVO[0].id
                    }
                }
            }
            this.$router.push({ name: 'home', params: this.authorzation ? obj : {} })
        },
        submitChange() {
            this.$refs.changeForm.validate(async v => {
                if (v) {
                    let data = {
                        mobile: this.mobile,
                        msgCode: this.changeForm.msgCode,
                        password: this.changeForm.password
                    }
                    let res = await User.forgetPassword(data)
                    if (res.code === '0') {
                        User.loginOut()
                        // window.localStorage.clear()
                        localStorage.removeItem("isOffline");
                        localStorage.removeItem("accesstoken");
                        localStorage.removeItem("refreshToken");
                        this.$router.push({ name: 'login' })
                        this.$message.success('密码修改成功，请重新登录')
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        },
        async getCode() {
            if (!this.changeForm.mobile) {
                this.$message.error('请输入手机号')
                return
            }
            // let rex = new RegExp(/^1\d{10}$/g)
            // if (!rex.test(this.changeForm.mobile)) {
            //     this.$message.error('请输入正确的手机号')
            //     return
            // }

            let res = await User.pushShortMessage({ mobile: this.mobile })
            if (res.code === '0') {
                this.codeShow = true
                this.$message.success('发送成功')
                let time = setInterval(() => {
                    this.codeSecond--
                    if (this.codeSecond === 0) {
                        this.codeShow = false
                        this.codeSecond = 60
                        clearInterval(time)
                    }
                }, 1000)
            } else {
                this.$message.error(res.message)
            }
        },
        focus() {
            this.isError = false
            this.$refs.changeForm.clearValidate()
        },
    }
}
</script>

<style lang="scss">
#change-password {
    width: 100%;
    padding: 20px 30px;
    .back {
        cursor: pointer;
        width: 88px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #0085FF;
        color: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #D7D7D7;
        img{
            width: 8px;
            height: 11px;
            margin-right: 6px;
        }
    }
    .el-form-item__label {
        padding: 0;
    }
    .el-input,
    .el-input__inner {
        width: 360px;
        height: 40px;
        border-radius: 8px;
    }
    .code-container {
        position: relative;
    }
    .mobile-code {
        margin-right: 0;
        position: absolute;
        right: 19px;
        top: 0;
    }
    .code-second {
        position: absolute;
        right: 19px;
        top: 0;
        font-size: 16px;
        font-weight: 400;
        height: 17px;
        color: rgba(96, 98, 102, 1);
        line-height: 40px;
    }
    .submit {
        width: 88px;
        height: 32px;
        background: rgba(74, 148, 255, 1);
        border-radius: 4px;
        margin-left: 20px;
    }
}
</style>
